<template>
  <div class="app-content">
    <h2 class="font-medium mb-5 flex items-end">
      <span class="mr-2.5">审核版本</span>
      <template v-if="row">
        <el-tag v-if="row.status === 0" effect="dark" size="small">审核中</el-tag>
        <el-tag v-if="row.status === 1" type="success" effect="dark" size="small">审核通过</el-tag>
        <el-tag v-if="row.status === 2" type="danger" effect="dark" size="small">审核不通过</el-tag>
        <el-tag v-if="row.status === 3" type="info" effect="dark" size="small">审核撤回</el-tag>
      </template>
    </h2>
    <div v-if="row" class="flex justify-between items-center">
      <div>
        <p class="text-gray-500 mb-2.5">版本号</p>
        <p>{{ row.version }}</p>
      </div>
      <div>
        <p><span>发布时间：</span>{{ timestampToTime(row.ctime) }}</p>
        <p class="mt-2.5"><span>项目备注：</span>{{ row.summary }}</p>
      </div>
      <div>
        <el-popover placement="left" title="预览" width="200" trigger="click" class="mr-2.5" @show="onGetDouyinQrcode('audit')">
          <template #default>
            <div v-loading="qrcodeLoading" class="text-center">
              <img :src="qrcode['audit']" alt="" width="180" />
            </div>
          </template>
          <template #reference>
            <el-button>预览</el-button>
          </template>
        </el-popover>
        <template v-if="row.has_publish === 0">
          <el-button v-if="row.status === 1" type="success" @click="onReleaseDouyinVersion()">上架小程序</el-button>
          <el-popover v-if="row.status === 2" placement="left" width="900" trigger="click" class="mx-2.5">
            <template #default>
              <el-descriptions
                v-if="row.reasonDetail"
                border
                title="详细原因"
                :column="1"
                :label-style="{ width: '120px' }"
                :content-style="{ width: '450px' }"
              >
                <el-descriptions-item v-for="(item, key) in row.reasonDetail" :key="key" :label="key">
                  <p>{{ reason(item).reason }}</p>
                  <el-link type="primary" :underline="false" class="mr-5">
                    <a :href="reason(item).modifyGuide.link" target="_blank">《{{ reason(item).modifyGuide.name }}》</a>
                  </el-link>
                  <el-link type="info" :underline="false">
                    <a :href="row.attachInfo[key]" target="_blank">查看附件</a>
                  </el-link>
                </el-descriptions-item>
              </el-descriptions>
              <el-empty v-else />
            </template>
            <template #reference>
              <el-button type="danger">查看原因</el-button>
            </template>
          </el-popover>
          <el-button v-if="row.status === 0" type="primary" :loading="loading" @click="onRevokeAuditDouyinVersion()"> 撤回审核 </el-button>
        </template>
        <el-button v-else disabled type="primary">已上线</el-button>
      </div>
    </div>
    <div v-else class="flex items-center justify-center h-25 text-gray-500">暂无审核版本</div>
  </div>
</template>

<script setup>
import { ref, computed, inject, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { timestampToTime } from './utils'
import { getDouyinQrcode, releaseDouyinVersion, revokeAuditDouyinVersion } from '@/api/platform/app/douyin_open'

defineOptions({
  name: 'DkDouyinAuditContainer'
})

const props = defineProps({
  row: {
    type: Object,
    default: () => null
  }
})

const emit = defineEmits(['update'])

const loading = ref(false)
const qrcodeLoading = ref(false)
const qrcode = ref({})
const defaultApp = inject('defaultApp')

const platformAppId = computed(() => {
  return defaultApp.value.id
})

const reason = (item) => {
  return JSON.parse(item)[0]
}

// 发布代码
const onReleaseDouyinVersion = () => {
  releaseDouyinVersion(platformAppId.value)
    .then((res) => {
      ElMessage.success(res.msg)
      emit('update')
    })
    .catch(() => {
      // 处理错误
    })
}

// 撤回审核
const onRevokeAuditDouyinVersion = () => {
  loading.value = true
  revokeAuditDouyinVersion(platformAppId.value).then((res) => {
    ElMessage.success(res.msg)
    loading.value = false
    emit('update')
  })
}

const onGetDouyinQrcode = (version) => {
  qrcodeLoading.value = true
  getDouyinQrcode(platformAppId.value, version)
    .then((res) => {
      console.log(res)
      qrcode.value[version] = res.data.qr_code_url
      qrcodeLoading.value = false
    })
    .catch(() => {
      qrcodeLoading.value = false
    })
}

onMounted(() => {
  console.log(props.row)
})
</script>
